<template>
  <div class="tabs-box">
    <div class="tabs-menu">
      <el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
        <el-tab-pane v-for="item in tabsMenuList" :key="item.path" :label="item.title" :name="item.path"
          :closable="item.close">
          <template #label>
            <div v-contextmenu="{ name: 'context-menu-1' }" class="menu-item">
              <el-icon v-if="item.icon && tabsIcon" class="tabs-icon">
                <component :is="item.icon"></component>
              </el-icon>
              {{ item.title }}
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
      <!-- <MoreButton /> -->
      <div class="context-menu">
        <context-menu name="context-menu-1">
          <context-menu-item @click="closeCurrentTab">
            <el-icon class="item-icon">
              <Remove />
            </el-icon>
            <span> 关闭当前</span>
          </context-menu-item>
          <context-menu-item @click="closeOnSide('left')"> <el-icon class="item-icon">
              <DArrowLeft />
            </el-icon>关闭左侧</context-menu-item>
          <context-menu-item @click="closeOnSide('right')"> <el-icon class="item-icon">
              <DArrowRight />
            </el-icon>关闭右侧</context-menu-item>
          <context-menu-item @click="closeOtherTab"><el-icon class="item-icon">
              <CircleClose />
            </el-icon>关闭其他</context-menu-item>
          <context-menu-item @click="closeAllTab"> <el-icon class="item-icon">
              <FolderDelete />
            </el-icon>关闭所有</context-menu-item>
        </context-menu>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import Sortable from "sortablejs";
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useGlobalStore } from "@/stores/modules/global";
import { useTabsStore } from "@/stores/modules/tabs";
import { useAuthStore } from "@/stores/modules/auth";
import { TabsPaneContext, TabPaneName } from "element-plus";
import MoreButton from "./components/MoreButton.vue";
import { HOME_URL } from "@/config";
import { Watch } from "@element-plus/icons";

const route = useRoute();
const router = useRouter();
const tabStore = useTabsStore();
const authStore = useAuthStore();
const globalStore = useGlobalStore();

const tabsMenuValue = ref(route.fullPath);
const tabsMenuList = computed(() => tabStore.tabsMenuList);

const tabsIcon = computed(() => globalStore.tabsIcon);

onMounted(() => {
  tabsDrop();
  initTabs();
});

// 监听路由的变化（防止浏览器后退/前进不变化 tabsMenuValue）
watch(
  () => route.fullPath,
  () => {
    if (route.meta.isFull) return;
    tabsMenuValue.value = route.fullPath;
    const tabsParams = {
      icon: route.meta.icon as string,
      title: route.meta.title as string,
      path: route.fullPath,
      name: route.name as string,
      close: !route.meta.isAffix,
      isKeepAlive: route.meta.isKeepAlive as boolean
    };
    tabStore.addTabs(tabsParams);
  },
  { immediate: true }
);

// 初始化需要固定的 tabs
const initTabs = () => {
  authStore.flatMenuListGet.forEach(item => {
    if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
      const tabsParams = {
        icon: item.meta.icon,
        title: item.meta.title,
        path: item.path,
        name: item.name,
        close: !item.meta.isAffix,
        isKeepAlive: item.meta.isKeepAlive
      };
      tabStore.addTabs(tabsParams);
    }
  });
};

// tabs 拖拽排序
const tabsDrop = () => {
  Sortable.create(document.querySelector(".el-tabs__nav") as HTMLElement, {
    draggable: ".el-tabs__item",
    animation: 300,
    onEnd({ newIndex, oldIndex }) {
      const tabsList = [...tabStore.tabsMenuList];
      const currRow = tabsList.splice(oldIndex as number, 1)[0];
      tabsList.splice(newIndex as number, 0, currRow);
      tabStore.setTabs(tabsList);
    }
  });
};

const emit = defineEmits(["tabClick", "returnToTheHome"]);
// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
  emit("tabClick", tabItem.props);
  const fullPath = tabItem.props.name as string;
  router.push(fullPath);
};

// Remove Tab
const tabRemove = (fullPath: TabPaneName) => {
  tabStore.removeTabs(fullPath as string, fullPath == route.fullPath);
};

// 关闭当前页
const closeCurrentTab = () => {
  if (route.meta.isAffix) return;
  tabStore.removeTabs(route.fullPath);
};

// 关闭两侧
const closeOnSide = (direction: "left" | "right") => {
  tabStore.closeTabsOnSide(route.fullPath, direction);
};

// 关闭其他
const closeOtherTab = () => {
  tabStore.closeMultipleTab(route.fullPath);
};

// 全部关闭
const closeAllTab = () => {
  tabStore.closeMultipleTab();
  router.push(HOME_URL);
  emit('returnToTheHome')
};

//观察标签，找到对应的一级菜单和二级菜单


</script>

<style scoped lang="scss">
@import "./index.scss";
</style>

<style>
.menu-item {
  display: flex;
  align-items: center;
}

.v-contextmenu {
  z-index: 999;
  top: 92px !important;

}

.v-contextmenu-item[data-v-3470b981] {
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center
}


.item-icon {
  margin-right: 0.3rem;
}
</style>
